<template>
  <div
    id="progress_echart"
    :style="{ width: '400px', height: '300px', backgroundColor: '#fff' }"
  ></div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
/**
 *  因为echart中的柱状图会根据数据自动调整，所以不建议作为数据总条数可变的进度条样式展示，虽然使用dataZoom可以使展示数据的条数，但是会存在数据条数过少时，滚动条会显示不全，所以不建议使用；
 * 解决方法：可以使用echart写一个单个进度条，之后使用v-for循环出多个进度条https://blog.csdn.net/weixin_53072519/article/details/121659301
 */
let option = {
  title: {
    text: '柱状图进度条样式--滚动条使用',
    x: 'center',
    y: 'top',
    textStyle: {
      fontSize: 14,
      color: '#fff'
    }
  },
  grid: {
    show: 'true',
    borderWidth: '0',
    height: '90%',
    width: '70%',
    left: '22%',
    top: 10
    // y:"20%",
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: '{b0}: {c0}'
    /*formatter: function(params) {
            var result = '';
            params.forEach(function (item) {
                result += item.marker + " " + item.seriesName + " : " + item.value +"</br>";
            });
            return result;
        }*/
  },
  backgroundColor: '#121B2C', //背景色
  // 滑动条
  dataZoom: [
    {
      // 设置滚动条的隐藏或显示
      show: true,
      // 设置类型
      type: 'slider',
      // 设置背景颜色
      backgroundColor: 'rgb(19, 63, 100)',
      // 设置选中范围的填充颜色
      fillerColor: 'rgb(16, 171, 198)',
      // 设置边框颜色
      borderColor: 'rgb(19, 63, 100)',
      // 是否显示detail，即拖拽时候显示详细数值信息
      showDetail: false,
      // 数据窗口范围的起始数值
      startValue: 0,
      // 数据窗口范围的结束数值（一页显示多少条数据）
      endValue: 3,
      // 控制哪个轴，如果是number表示控制一个轴，
      // 如果是Array表示控制多个轴。此处控制第二根轴
      yAxisIndex: [0, 1],
      // empty：当前数据窗口外的数据，被设置为空。
      // 即不会影响其他轴的数据范围
      filterMode: 'empty',
      // 滚动条宽度
      width: 8,
      // 滚动条高度
      height: '80%',
      // 滚动条显示位置，距离右边
      right: 3,
      // 控制手柄的尺寸
      handleSize: 0,
      // 是否锁定选择区域（或叫做数据窗口）的大小
      zoomLoxk: true,
      // 组件离容器上侧的距离
      // 如果top的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐
      top: 'middle',
      animation: false
    },
    {
      // 没有下面这块的话，只能拖动滚动条，
      // 鼠标滚轮在区域内不能控制外部滚动条
      type: 'inside',
      // 控制哪个轴，如果是number表示控制一个轴，
      // 如果是Array表示控制多个轴。此处控制第二根轴
      yAxisIndex: [0, 1],
      // 滚轮是否触发缩放
      zoomOnMouseWheel: false,
      // 鼠标移动能否触发平移
      moveOnMouseMove: true,
      // 鼠标滚轮能否触发平移
      moveOnMouseWheel: true
    }
  ],
  xAxis: {
    show: false, //是否显示x轴
    type: 'value'
  },
  yAxis: {
    type: 'category',
    inverse: true, //让y轴数据逆向,
    axisLabel: {
      show: true,
      textStyle: {
        color: '#666' //y轴字体颜色
      },
      formatter: function (value, index) {
        console.log(value, index)
        return ['{lg|' + (index + 1) + '}' + '{title|' + value + '} '].join('\n')
      },
      //定义富文本标签
      rich: {
        lg: {
          fontWeight: 'bold',
          fontSize: 12, //字体默认12
          color: '#08C',
          padding: [0, 5, 0, 0]
        },
        title: {
          color: '#fff',
          fontWeight: 'lighter'
          // borderWidth: 1,
          // borderColor: '#08c'
          // textareaBorderColor: '#08c',
        }
      }
    },
    splitLine: { show: false }, //横向的线
    axisTick: { show: false }, //y轴的端点
    axisLine: { show: false }, //y轴的线
    data: [
      '闽DZ0175',
      '闽DZ6027',
      '闽D83876',
      '闽DZ1377',
      '闽DZ8825',
      '闽DZ6027',
      '闽D83876',
      '闽DZ1377',
      '闽DZ8825'
    ]
  },
  series: [
    {
      name: '数据内框',
      type: 'bar',
      itemStyle: {
        normal: {
          barBorderRadius: 30,
          color: '#00b5eb'
        }
      },
      /*label: {
                normal: {
                    show: true,
                    position: 'right',
                    color: 'red',
                    fontSize: 14,
                    formatter: 
                    function(param) {
                        // return 'xx';
                    },
                }
            },*/
      barWidth: 10,
      data: [11, 33, 77, 39, 55, 33, 77, 39, 55]
    },
    {
      name: '外框',
      type: 'bar',
      itemStyle: {
        normal: {
          barBorderRadius: 30,
          color: 'rgba(255, 255, 255, 0.14)' //rgba设置透明度0.14
        }
      },
      // 同一类目内柱子间间距
      barGap: '-100%',
      z: 0,
      barWidth: 10,
      data: [100, 100, 100, 100, 100, 100, 100, 100, 100]
    }
  ]
}
let myChart
let timer = null
const myChartInit = () => {
  let chartDom = document.getElementById('progress_echart')
  myChart = echarts.init(chartDom)
  option && myChart.setOption(option)
}
const scrollInterval = () => {
  let length = option.series[0].data.length
  timer = setInterval(() => {
    if (option.dataZoom[0].endValue == length - 1) {
      option.dataZoom[0].endValue = 3
      option.dataZoom[0].startValue = 0
    } else {
      option.dataZoom[0].startValue += 1
      option.dataZoom[0].endValue += 1
    }
    myChart.setOption(option)
  }, 2000)
}
onMounted(() => {
  myChartInit()
  // scrollInterval()
})
onUnmounted(() => {
  clearInterval(timer)
  timer = null
})
</script>
<style></style>
